// 点击登录  显示登录弹框
var loginBtn = document.querySelector('header .member div')
loginBtn.onclick = function(){
    var  loginDialog = document.querySelector('section.login')//Dialog:对话框 弹框
    loginDialog.style.visibility='visible'
}
// 点击×  关闭登录弹框
var loginBtn = document.querySelector('section.login i')
loginBtn.onclick = function(){
    var  loginDialog = document.querySelector('section.login')
    loginDialog.style.visibility='hidden'
}
//登录弹框的蓝色区域拖拽
var loginBlue=document.querySelector('section.login .menu')
loginBlue.onmousedown = function(evt){
    var oldE = evt||window.event
    document.onmousemove = function(evt){
        var e = evt||window.event
        var left = e.clientX-oldE.offsetX
        var top = e.clientY-oldE.offsetY
        //限制边界
        if(left<0) left=0
        if(top<0) top=0
        var loginPlay = document.querySelector('section.login .item')
        var maxLeft=(window.innerWidth||document.documentElement.clientWidth)-loginPlay.offsetWidth
        var maxTop=(window.innerHeight||document.documentElement.clientHeight)-loginPlay.offsetHeight
        if(left>maxLeft)left=maxLeft
        if(top>maxTop)top=maxTop
        loginPlay.style.position='absolute'//别忘记写这条
        loginPlay.style.top=top+'px'//别忘记加px
        loginPlay.style.left=left+'px'
    }
    document.onmouseup = function(){
        document.onmousemove=null
    }
}

//登录倒计时 点击获取验证码开始倒计时 (留心:重复点击BUG disabled属性，
//captcha验证码
var num=5
var captchaBtn = document.querySelector('section.login .captcha')
captchaBtn.onclick=function(){
    
    //行为验证码
    var captchaBox=document.querySelector('section.captcha')
    captchaBox.style.visibility='visible'
    //关闭
    document.querySelector('section.captcha i.icon-close').onclick = function(){
        captchaBox.style.visibility='hidden'
    }
    //按下拖动实现验证
    var dragBtn = document.querySelector('section.captcha .drag .btn')
    dragBtn.onmousedown=function(){
        document.onmousemove = function(evt){
            var e = evt||window.event
            // var left2 = document.querySelector('section.captcha .check img:nth-of-type(1)')
            // console.log(left2.clientX);
            var left = e.clientX - (captchaBox.offsetLeft-captchaBox.offsetWidth/2)-dragBtn.offsetWidth/2//❤transform:translate(-50%,-50%) 造成了此公式 其实图片位置在删除transform效果的位置
            if(left<0)left=0
            if(left>325)left=325
            dragBtn.style.left = left+'px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left=left+'px'
        }
        document.onmouseup=function(){
            document.onmousemove=null
            //判断拖拽是否正确
            var value=parseInt(dragBtn.style.left)
            //成功隐藏
            if(value>=260&&value<=265){
                captchaBox.style.visibility='hidden'
                //倒计时
                captchaBtn.innerText=num+ '秒后重发'
                captchaBtn.disabled=true//disabled=“true” button按钮变灰不能被点击 是button按钮的默认属性
                t=setInterval(function(){
                    if(num<=1){
                        captchaBtn.innerText='重新发送'
                        clearInterval(t)
                        num=5
                        captchaBtn.disabled=false
                        return //注意：这里的return是终止函数 后面代码不走
                }
                num--
                captchaBtn.innerText=num+ '秒后重发'
                },1000)
            }
            //不管成功与失败都将重置
            dragBtn.style.left='0px'
            document.querySelector('section.captcha .check img:nth-of-type(2)').style.left='0px'
        }
    }
    return 

    
}

//登录表单验证
var loginSubmit = document.querySelector('section.login .submit')
loginSubmit.onclick = function(){
    //手机号部分
    var mobileObj=document.querySelector('.mobile')
    if(mobileObj.value==''||mobileObj.value.length!==11||!Number(mobileObj.value)){//value???
        document.querySelector('section.login .form p:nth-of-type(3)').innerText = '手机格式有误'
    }else{
        document.querySelector('section.login .form p:nth-of-type(3)').innerText = ''
    }
    //验证码部分
    var passwordObj=document.querySelector('.password')
    if(passwordObj.value==''||passwordObj.value.length!==4||!Number(passwordObj.value)){
        document.querySelector('section.login .form  p:nth-of-type(4)').innerText = '验证码为四位纯数字'
    }else{
        document.querySelector('section.login .form  p:nth-of-type(4)').innerText = ''
    }
}
